<template>
	<view>
		<u-form label-position="left" :model="view" ref="uForm">
			<view class="px6 bgw mt2">
				<u-form-item label="手机号:" prop="mobile" label-width="140">
					<u-input v-model:modelValue="formData.mobile" placeholder="请输入11位手机号" maxlength="11" type="tel" />
					<!-- #ifdef MP -->
					<template #right>
						<button size="mini" ref="getMobile" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">本机号</button>
					</template>
					<!-- #endif -->
				</u-form-item>
				<u-form-item label="新密码:" prop="password" label-width="140">
					<u-input v-model:modelValue="formData.password" placeholder="请输入密码(6-16位)" maxlength="16" type="password" />
				</u-form-item>
				<u-form-item label="确认密码:" prop="repeat" label-width="140">
					<u-input v-model:modelValue="formData.repeat" placeholder="请输入确认密码" maxlength="16" type="password" />
				</u-form-item>
			</view>
		</u-form>
		<view class="p5 bgw">
			<button @click="getSmsCode" :disabled="smsShow" type="primary">下一步</button>
		</view>
		<u-modal :show="Show" :show-title="false" :show-cancel-button="true" :show-confirm-button="false">
			<view class="fjc pt8">
				请于<u-count-down :timestamp="seconds" @end="smsShow=false" ref="uCountDown" :show-days="false" :show-hours="false" :show-minutes="false" />秒后重新发送
			</view>
			<view class="py5">
				<u-message-input :value="formData.smscode" mode="bottomLine" @finish="finish" ref="uCode" />
			</view>
		</u-modal>
	</view>
</template>

<script lang="ts">
import {page,form} from '@/mixins'
import CryptoJS from "crypto-js"
import {mapActions} from 'pinia'

export default {
	mixins: [page,form],
	data() {
		return {
			formData: { mobile:'', password: '', repeat: '', smscode: '' },
			smsShow: false,
			formPath: 'signup',
			seconds: 120,
			rules: {
				mobile: [{
					type: 'number',
					required: true,
					len: 11,
					message: '请输入正确的手机号',
					trigger: ['change', 'blur']
				}],
				password: [{
					type: 'string',
					required: true,
					min: 6,
					max: 16,
					message: '请输入密码,6-16个字符',
					trigger: ['blur', 'change']
				}],
				repeat: [{
					type: 'string',
					required: true,
					message: '请输入确认密码',
					trigger: ['blur', 'change']
				}, {
					validator: (r, v) => v === this.formData.password,
					message: '两次密码不一致',
					trigger: ['blur', 'change']
				}]
			}
		}
	},

	methods: {
		...mapActions('me', ['update']),
		getSmsCode(){
			if(!this.$u.test.mobile(this.formData.mobile)){
				return this.$u.toast('请输入正确的手机号')
			}
			uni.$u.http.post('sms/auth', { mobile:this.formData.mobile, exist: 1 }).then(res => {
				this.smsShow=true
				this.$nextTick(() => {
					this.$refs.uCountDown.start()
				})
			}).catch(e=>{})
		},
		getPhoneNumber(e) {
			// #ifdef MP
			if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
				// console.log('用户拒绝提供手机号');
			} else {
				uni.$u.http.post('wemini/decrypt', e.detail).then(res => {
					this.formData.mobile = res.purePhoneNumber
				}).catch(e=>{})
			}
			// #endif
		},
		finish(e){
			this.formData.smscode=e
			this.submit()
		},
		save() {
			uni.$u.http.post(this.formPath, {
				verifyId: this.verifyId,
				...this.view,
				password: CryptoJS.MD5(this.formData.password)
			}).then(res => {
				this.update(res)
				this.smsShow=false
				uni.navigateBack()
			}).catch(res=>{
				this.formData.smscode=''
			})
		}
	}
}
</script>
